<template>
  <div class="enter">
    <div class="closeWrapper">
      <span class="iconfont iconicon-test close"></span>
    </div>
    <div class="logoWrapper">
      <span class="iconfont iconnew logo"></span>
    </div>
    <!-- 引入输入框 -->
    <Autinput
      textPlaceholder="用户名/手机号码"
      type="text"
      rule="^\d{5,11}$"
      errMsg="请输入正确的手机号码"
      @valChanged="setUsername"
    />
    <Autinput
      textPlaceholder="输入昵称"
      type="text"
      rule="^\w{2,10}$"
      errMsg="请输入正确的手机号码"
      @valChanged="setnickname"
    />
    <Autinput
      textPlaceholder="输入密码"
      type="password"
      rule="^.{3,9}$"
      errMsg="请输入3到9位的密码"
      @valChanged="setPassword"
    />

    <AuthBtn btnText="注册" @clicked="register('注册')" />
    <AuthBtn btnText="返回登录页" @clicked="register('返回登录页')" />
  </div>
</template>

<script>
import Autinput from "../components/Autinput";
import AuthBtn from "../components/AuthBtn";
import { log } from "util";
export default {
  data() {
    return {
      username: "",
      nickname: "",
      password: ""
    };
  },
  components: {
    Autinput,
    AuthBtn
  },
  methods: {
    // login() {
    //   console.log("接受到子组件的点击事件，触发login函数");
    //   console.log("用户名", this.username);
    //   console.log("密码", this.password);
    // },
    setUsername(username) {
      this.username = username;
    },
    setPassword(password) {
      this.password = password;
    },
    setnickname(nickname) {
      this.nickname = nickname;
    },
    register(text) {
      if (text == "注册") {
        if (!this.username || !this.password || !this.nickname) {
          this.$toast.fail("请填写完整信息");
          return;
        }

        this.$axios({
          url: "http://127.0.0.1:3000/register",
          method: "post",
          data: {
            username: this.username,
            nickname: this.nickname,
            password: this.password
          }
        }).then(res => {
          const { message, data } = res.data;
          console.log(res.data);
          if (message == "注册成功") {
            this.$toast.success(message);
          } else {
            this.$toast.fail(message);
          }
        });
      } else {
        this.$router.replace("/login");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.enter {
  .closeWrapper {
    .close {
      font-size: 8.33vw;
    }
  }
  .logoWrapper {
    text-align: center;
    .logo {
      font-size: 27.78vw;
      color: #d81e06;
    }
  }
}
</style>
